<template>
  <div style="display: flex; margin: 0 0 24px 0">
    <div class="list_tabs">
      <div
        :style="
          state.activefilterType.name == 'into'
            ? 'background-color: var(--pcmain-color) !important;color: #fff !important;'
            : ''
        "
        @click="state.activefilterType.name = 'into'"
      >
        进场条件
      </div>
      <div
        :style="
          state.activefilterType.name == 'giveup'
            ? 'background-color: var(--pcmain-color) !important;color: #fff !important;'
            : ''
        "
        @click="state.activefilterType.name = 'giveup'"
      >
        放弃条件
      </div>
      <div
        :style="
          state.activefilterType.name == 'pass'
            ? 'background-color: var(--pcmain-color) !important;color: #fff !important;'
            : ''
        "
        @click="state.activefilterType.name = 'pass'"
      >
        下单条件
      </div>
      
    </div>

    <div class="display_icon">
      <div @click="clickdisplayicon">
        <img
          v-if="state.activefilterType.display == '1'"
          style="width: 16px; height: 16px"
          src="@/assets/filter/zhedie.png"
          alt=""
        />
        <img
          v-if="state.activefilterType.display == '0'"
          style="width: 16px; height: 16px"
          src="@/assets/filter/zhedie-2.png"
          alt=""
        />
      </div>
    </div>
  </div>
</template>

<script setup>
const emist = defineEmits()
const { store, state } = inject('Scheme')

const clickdisplayicon = () => {
  if (state.activefilterType.display == '1') {
    state.activefilterType.display = '0'
  } else if (state.activefilterType.display == '0') {
    state.activefilterType.display = '1'
  }
  store.changeactiveNames()
}
</script>

<style lang="scss" scoped>
.list_tabs {
  display: flex;
  div {
    padding: 6px 16px;
    background-color: #f5f5f5;
    font-size: 12px;
    color: #252a30;
    margin-right: 8px;
    cursor: pointer;
  }
}
.display_icon {
  div {
    width: 28px;
    height: 28px;
    background-color: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
}

.active_tabtype {
  background-color: #47acff !important;
  color: #fff !important;
}
</style>